Welcome to Css!

11.07 父元素高度塌陷

高度塌陷:由于父元素中的子元素设置了浮动属性,会造成父元素高度塌陷

防止高度塌陷:

1、直接给父元素设置高度:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css</title>

<link rel="stylesheet" href="rerest.css">

<style type="text/css">

ul{width:305px;border:1px solid red;margin:50px auto; }

ul li{width:100px; height:100px; color:white; text-align:center; line-height:100px; font-size:30px; }

li{ float:left}

.a{background:green;}

.b{background:blue;}

.c{background:orange;}

</style>

</head>

<body>

<ul>

<li class="a">1</li>

<li class="b">2</li>

<li class="c">3</li>

</ul>

</body>

</html>

返回值:

修改块级元素,直接加行高:

ul{width:305px;border:1px solid red;margin:50px auto;height:200px }